<template>
  <div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      size="mini"
      ref="headers"
    >
      {{ headers }}
      <el-table-column label="参数名" width="200" prop="name">
        <template slot-scope="scope">
          <el-autocomplete
            class="inline-input"
            v-model="scope.row.key"
            :fetch-suggestions="searchKeyword"
            clearable
            size="mini"
          ></el-autocomplete>
        </template>
      </el-table-column>

      <el-table-column label="参数值" width="280" prop="value">
        <template slot-scope="scope">
          <el-input clearable v-model="scope.row.value" size="mini"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="描述" width="220" prop="desc">
        <template slot-scope="scope">
          <el-input clearable v-model="scope.row.desc" size="mini"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-circle-plus-outline"
            size="mini"
            @click="insertTableRow(scope.$index, scope.row)"
            style="border:none"
          >
          </el-button>

          <el-button
            icon="el-icon-delete"
            size="mini"
            v-show="scope.$index !== 0"
            @click="deleteTableRow(scope.$index, scope.row)"
            style="border:none"
          >
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { isEmpty, cloneDeep } from "lodash";
export default {
  name: "RequestHeaders",
  props: {
    headers: {
      required: true
    }
  },
  components: {},
  computed: {},
  watch: {
    headers: function(now) {
      this.tableData = cloneDeep(now);
    }
  },
  created() {
    this.tableData = isEmpty(this.headers)
      ? this.defaultValue
      : cloneDeep(this.headers);
  },
  mounted() {},
  methods: {
    emitHeaders() {
      return this.tableData;
    },

    insertTableRow(index, row) {
      this.tableData.push({
        key: "",
        value: "",
        desc: ""
      });
    },

    initData() {
      this.tableData.splice(0, this.tableData.length, {
        key: "",
        value: "",
        desc: ""
      });
    },

    deleteTableRow(index, row) {
      this.tableData.splice(index, 1);
    },

    // 输入框中查询的方法
    searchKeyword(queryString, cb) {
      let headerOptions = this.headerOptions;
      let results = queryString
        ? headerOptions.filter(this.createFilter(queryString))
        : headerOptions;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },

    createFilter(queryString) {
      return headerOptions => {
        return (
          headerOptions.value
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) === 0
        );
      };
    }
  },

  data() {
    return {
      defaultValue: [
        {
          key: "",
          value: "",
          desc: ""
        }
      ],
      tableData: [],
      isEdit: "",
      currentRow: "",
      headerOptions: [
        {
          value: "Accept-Charset"
        },
        {
          value: "Accept-Language"
        },
        {
          value: "Authorization"
        },
        {
          value: "Cache-Control"
        },
        {
          value: "Connection"
        },
        {
          value: "Cookie"
        },
        {
          value: "Content-Length"
        },
        {
          value: "Content-Type"
        },
        {
          value: "Expect"
        },
        {
          value: "Date"
        },
        {
          value: "From"
        },
        {
          value: "Host"
        },
        {
          value: "Origin"
        },
        {
          value: "Proxy-Authorization"
        },
        {
          value: "Range"
        },
        {
          value: "Referer"
        },
        {
          value: "User-Agent"
        },
        {
          value: "Upgrade"
        }
      ]
    };
  }
};
</script>

<style lang="less"></style>
